<AccModal @onClose={{fn this.closeModal}}>
  <ProjectFileOperation>
    <button class='closeButton' {{on 'click' (fn this.closeModal)}}>
      <div class='closeButton-content'>
        {{inline-svg '/assets/x.svg' class='closeButton-icon'}}
      </div>
    </button>

    <div class='title'>
      <div class='sectionType'>
        <div class='versionTitle'>
          <strong class='versionTitle-name'>
            {{this.version.name}}
          </strong>
          <span class='versionTitle-tag'>
            {{this.version.tag}}
          </span>
        </div>
      </div>
    </div>

    {{#if this.document}}
      <RevisionExportOptions
        @format={{this.documentFormatFilter}}
        @documents={{this.documents}}
        @document={{this.documentFilter}}
        @orderBy={{this.orderByFilter}}
        @revision={{this.revisionFilter}}
        @revisions={{this.revisions}}
        @onChangeDocument={{fn (mut this.documentFilter)}}
        @onChangeRevision={{fn (mut this.revisionFilter)}}
        @onChangeFormat={{fn (mut this.documentFormatFilter)}}
        @onChangeOrderBy={{fn (mut this.orderByFilter)}}
      />
    {{/if}}

    <AsyncButton @onClick={{fn this.exportFile}} @disabled={{this.exportButtonDisabled}} class='button button--filled renderExport'>
      {{t 'components.project_file_operations.export'}}
    </AsyncButton>

    {{#if this.document}}
      {{#if this.exportLoading}}
        <SkeletonUi::ProgressLine />
      {{/if}}
    {{else}}
      <EmptyContent @text={{t 'pods.project.versions.export.empty_documents'}} @iconPath='assets/empty.svg' @center={{true}} @background={{'transparent'}} />
    {{/if}}

    <FileExport
      class='render'
      @onFileLoaded={{fn this.onFileLoaded}}
      @project={{this.project}}
      @revisions={{this.revisions}}
      @revision={{this.revision}}
      @document={{this.document}}
      @version={{this.version.tag}}
      @documentFormat={{this.documentFormatFilter}}
      @orderBy={{this.orderByFilter}}
    />
  </ProjectFileOperation>
</AccModal>